/*
 * @Description: 乘车记录的乘车信息详情
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:56:04
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-08-21 09:56:33
 */
<template>
  <div
    class="details_main fontsize32"
    v-wechat-title="$route.meta.title"
  >
    <div class="ticket_info part">
      <div class="bus">
        <i class="iconfont icon-bus fontsize48"></i>
        <span>公交嘉定西站 ➜ 立昂路嘉宏路站</span>
      </div>
      <p><span>出票状态：</span>未出票 </p>
      <p><span>票类型：</span>日票</p>
      <p><span>班次：</span>2019年7月1日 08:00</p>
    </div>
    <div class="ticket_price part">
      <p><span>票价：</span>￥20.00 </p>
      <p><span>数量：</span>1</p>
      <p><span>合计：</span>￥20.00</p>
      <p><span>折扣：</span>9折</p>
      <div class="pay flex-h flex-hsb">
        <p class="pay_num">实付：￥18.00</p>
        <p class="pay_state">已支付</p>
      </div>
    </div>
    <div class="dishonour">
      <button class="fontsize32">退票</button>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.details_main {
  width: 100%;
  min-height: fill-available;
  box-sizing: border-box;
  background-color: #f2f5f6;
  padding-top: 32px;
  position: relative;
  .part {
    width: 622px;
    margin: auto;
    margin-bottom: 32px;
    background-color: #fff;
    border-radius: 4px; /*no*/
    padding: 32px;
    p {
      margin-top: 32px;
      span {
        color: #999;
      }
    }
  }
  .ticket_info {
    .bus {
      height: 60px;
      line-height: 60px;
      padding-bottom: 24px;
      border-bottom: 1px solid #ddd; /*no*/
      i {
        position: relative;
        top: 6px;
        color: #027aff;
      }
      span {
        height: 60px;
        line-height: 60px;
        display: inline-block;
      }
    }
  }
  .ticket_price {
    padding-top: 1px;
    .pay {
      border-top: 1px solid #ddd; /*no*/
      padding-top: 30px;
      margin-top: 32px;
      p {
        height: 44px;
        line-height: 44px;
        margin-top: 0;
      }
      .pay_num {
        color: #e84d38;
      }
      .pay_state {
        color: #027aff;
      }
    }
  }
  .dishonour {
    width: 100%;
    bottom: 60px;
    position: absolute;
    button {
      width: 686px;
      height: 72px;
      background-color: #027aff;
      color: #fff;
      border: 0;
      border-radius: 25px; /*no*/
      margin: 0 32px;
    }
  }
}
</style>
